<template>
  <b-navbar toggleable="lg" type="dark" variant="dark">
    <b-navbar-brand to="/" exact exact-active-class="active">LW-BBS</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-item-dropdown v-if="login" right>
          <template v-slot:button-content>
            <em>{{ user_name }}</em>
          </template>
          <b-dropdown-item @click="GoHome">主页</b-dropdown-item>
          <b-dropdown-item to="/editor">发表</b-dropdown-item>
          <b-dropdown-item @click="LoginOut">注销</b-dropdown-item>
        </b-nav-item-dropdown>
        <b-navbar-nav v-else right>
          <b-nav-item to="/login">登录</b-nav-item>
          <b-nav-item to="/sign">注册</b-nav-item>
        </b-navbar-nav>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</template>

<script>
export default {
  computed: {
    login: function () {
      return this.$store.state.isLogin;
    },
    user_name: function () {
      return this.$store.state.username;
    }
  },
  methods: {
    LoginOut() {
      this.$store.commit("changeLoginState", {
        isLogin: false,
        username: "",
        token: "",
        uid: ""
      });
      this.$bvToast.toast("退出登录", {
        title: "消息",
        variant: "success",
        autoHideDelay: 1000,
        solid: true
      })
      this.$router.push("/")
    },
    GoHome() {
      this.$router.push("/home")
    }
  }
};
</script>